import React, { Component } from "react";
import "./Draw.css";

export default class Draw extends Component {
	//状态,数据
	state = {
		r: 0,
		g: 0,
		b: 0,
	};

	// 获取颜色 方法
	getcolor = (color) => {
		return (e) => {
			this.setState({
				[color]: e.target.value,
			});
		};
	};

	render() {
		let { r, g, b } = this.state;
		return (
			<div className="draw">
				<div
					className="show"
					style={{ background: `rgb(${r},${g},${b})` }}
				></div>
				R:
				<input
					type="range"
					min="0"
					max="255"
					value={r}
					onChange={this.getcolor("r")}
				/>
				<br />
				<br />
				G:
				<input
					type="range"
					min="0"
					max="255"
					value={g}
					onChange={this.getcolor("g")}
				/>
				<br />
				<br />
				B:
				<input
					type="range"
					min="0"
					max="255"
					value={b}
					onChange={this.getcolor("b")}
				/>
				<br />
				<br />
			</div>
		);
	}
}
